<template>
  <div
    class="company-profile-container animate__animated"
    :class="[visible ? 'animate__zoomIn' : 'animate__zoomOut']"
  >
    <div class="company-profile">
      <div class="arrow prevArrow" @click="prev()"></div>
      <div class="arrow nextArrow" @click="next()"></div>
      <a-spin :spinning="spinning">
        <div class="company-container">
          <div class="company-name">{{ checkSouce.orgName }}</div>
          <div class="company-main">
            <div
              class="card-content"
              v-for="item in configData"
              :key="item.uuid"
            >
              <div class="card-header">
                {{ item.name }}
                <span v-if="item.type == 'presentationForm.07'">
                  ：{{ item.data ? item.data.length : 0 }}个
                </span>
              </div>
              <!-- 类型1 -->
              <div
                class="card-body type_1"
                v-if="item.type == 'presentationForm.01' && item.data"
              >
                <div class="company-baseinfo">
                  <div class="company-img">
                    <ViewerImg :toolbar="false" :title="false">
                      <img :src="introductionImg(item)" class="company-image" />
                    </ViewerImg>
                  </div>
                </div>
                <span class="text-info" v-html="introductionDesc(item)"> </span>
              </div>
              <!-- 类型2 -->
              <div
                class="card-body type_2"
                v-if="item.type == 'presentationForm.02' && item.data"
              >
                <a-carousel arrows autoplay :autoplay-speed="5000">
                  <div
                    slot="prevArrow"
                    class="custom-slick-arrow"
                    style="left: -34px"
                  >
                    <a-icon type="left" />
                  </div>
                  <div
                    slot="nextArrow"
                    class="custom-slick-arrow"
                    style="right: -34px"
                  >
                    <a-icon type="right" />
                  </div>
                  <div
                    class="course-item"
                    v-for="(ev, ei) in coreBusiness(item)"
                    :key="ei"
                  >
                    <div class="honor-item">
                      <div class="imgs" v-for="v in ev" :key="v.uuid">
                        <div class="imgs-top">
                          <div class="img">
                            <ViewerImg :toolbar="false" :title="false">
                              <img :src="getUrl(v.image)" />
                            </ViewerImg>
                          </div>
                        </div>
                        <div class="imgs-bottom" :title="v.name">
                          {{ v.name }}
                        </div>
                      </div>
                    </div>
                  </div>
                </a-carousel>
              </div>
              <!-- 类型3 -->
              <div
                class="card-body type_3"
                v-if="item.type == 'presentationForm.03' && item.data"
              >
                <a-carousel arrows autoplay :autoplay-speed="5000">
                  <div
                    slot="prevArrow"
                    class="custom-slick-arrow"
                    style="left: -54px"
                  >
                    <a-icon type="left" />
                  </div>
                  <div
                    slot="nextArrow"
                    class="custom-slick-arrow"
                    style="right: -34px"
                  >
                    <a-icon type="right" />
                  </div>
                  <div
                    class="course-item"
                    v-for="(ev, ei) in developCourse(item)"
                    :key="ei"
                  >
                    <div class="three-item">
                      <div class="base-info" v-for="(v, i) in ev" :key="i">
                        <div class="left-images">
                          <ViewerImg :toolbar="false" :title="false">
                            <img :src="getUrl(v.image)" />
                          </ViewerImg>
                        </div>
                        <div class="right-text">
                          <div class="divider"></div>
                          <div class="small-title">
                            {{ v.name }}
                          </div>
                          <div class="small-body">
                            {{ v.introduction }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a-carousel>
              </div>
              <!-- 类型4 -->
              <!--  -->
              <div
                class="card-body type_6"
                v-if="item.type == 'presentationForm.04' && item.data"
              >
                <div class="type-6-left">
                  <div class="text-warp" v-html="item.introduction"></div>
                </div>
                <div class="type-6-right">
                  <div class="left" @click="handleLeft()">
                    <a-icon type="left" />
                  </div>
                  <div class="right" @click="handleRight()">
                    <a-icon type="right" />
                  </div>
                  <carousel-3d height="200px" ref="carousel3d">
                    <slide :index="ei" v-for="(ev, ei) in item.data" :key="ei">
                      <div class="photo-container">
                        <div class="photo-img">
                          <ViewerImg :toolbar="false" :title="false">
                            <img :src="getUrl(ev.image)" />
                          </ViewerImg>
                        </div>
                        <div class="photo-name">{{ ev.name }}</div>
                      </div>
                    </slide>
                  </carousel-3d>
                </div>
              </div>
              <!-- 类型5 -->
              <div
                class="card-body type_4"
                v-if="item.type == 'presentationForm.05' && item.data"
              >
                <div class="left-content">
                  <div class="text-warp" v-html="item.introduction"></div>
                </div>
                <div class="right-content">
                  <a-carousel arrows autoplay :autoplay-speed="5000">
                    <div
                      slot="prevArrow"
                      class="custom-slick-arrow"
                      style="left: -34px"
                    >
                      <a-icon type="left" />
                    </div>
                    <div
                      slot="nextArrow"
                      class="custom-slick-arrow"
                      style="right:  -34px"
                    >
                      <a-icon type="right" />
                    </div>
                    <div
                      class="course-item"
                      v-for="(ev, ei) in firmCulture(item)"
                      :key="ei"
                    >
                      <div class="three-item">
                        <div class="base-info" v-for="(v, i) in ev" :key="i">
                          <div class="left-images">
                            <ViewerImg :toolbar="false" :title="false">
                              <img :src="getUrl(v.image)" />
                            </ViewerImg>
                          </div>
                          <div class="right-text">
                            <div class="divider"></div>
                            <div class="small-title">
                              {{ v.name }}
                            </div>
                            <div class="small-body">
                              {{ v.introduction }}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a-carousel>
                </div>
              </div>
              <!-- 类型6 -->
              <div
                class="card-body type_5"
                v-if="item.type == 'presentationForm.06' && item.data"
              >
                <a-carousel arrows>
                  <div
                    slot="prevArrow"
                    class="custom-slick-arrow"
                    style="left: -34px"
                  >
                    <a-icon type="left" />
                  </div>
                  <div
                    slot="nextArrow"
                    class="custom-slick-arrow"
                    style="right:  -34px"
                  >
                    <a-icon type="right" />
                  </div>
                  <div
                    class="course-item"
                    v-for="(ev, ei) in firmHonor(item)"
                    :key="ei"
                  >
                    <div class="type-five-item">
                      <div class="culture" v-for="(v, i) in ev" :key="i">
                        <div class="sort">0{{ i + 1 }}</div>
                        <div class="culture-title">{{ v.name }}</div>
                        <div class="culture-line"></div>
                        <div class="culture-content">
                          <div
                            v-for="(t, idx) in v.introduction.split('&&&')"
                            :key="idx"
                          >
                            {{ t }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </a-carousel>
              </div>
              <!-- 类型7 -->
              <div
                class="card-body type_7"
                v-if="item.type == 'presentationForm.07' && item.data"
              >
                <div
                  class="seven-card-item"
                  v-for="(ev, ei) in item.data"
                  :key="ei"
                >
                  <div class="warp-item">
                    <div class="seven-img">
                      <ViewerImg
                        :toolbar="false"
                        :title="false"
                        v-if="getUrl(ev.proImage)"
                      >
                        <img :src="getUrl(ev.proImage)" alt="暂无图片" />
                      </ViewerImg>
                      <div v-else class="not-data"></div>
                    </div>
                    <div class="seven-content">
                      <div class="seven-title">
                        {{ ev.proName }}
                      </div>
                      <div class="text-item">
                        <icon-fonts icon="icon-touzi1" />投资规模：
                        {{ ev.roadMoney }}万元
                      </div>
                      <div class="text-item">
                        <icon-fonts icon="icon-xiangmu" />工程类型：{{
                          ev.engType
                        }}
                      </div>
                      <div class="text-item">
                        <icon-fonts icon="icon-riqixuanze" />开工日期：{{
                          ev.startDate
                        }}
                      </div>
                      <div class="text-item">
                        <icon-fonts icon="icon-riqixuanze" />交工日期：{{
                          ev.endDate
                        }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 类型8 -->
              <div
                class="card-body type_8"
                v-if="item.type == 'presentationForm.08' && item.data"
              >
                <div class="card-item" v-for="(ev, ei) in item.data" :key="ei">
                  <div class="card-warp">
                    <div class="top-img">
                      <ViewerImg :toolbar="false" :title="false">
                        <img :src="getUrl(ev.image)" />
                      </ViewerImg>
                    </div>
                    <div class="bottom-text">{{ ev.name }}</div>
                  </div>
                </div>
              </div>
              <!-- 类型9 -->
              <div
                class="card-body type_9"
                v-if="item.type == 'presentationForm.09' && item.data"
              >
                <div
                  class="nine-card-item"
                  v-for="(ev, ei) in item.data"
                  :key="ei"
                >
                  <div class="nine-img">
                    <ViewerImg :toolbar="false" :title="false">
                      <img :src="getUrl(ev.image)" />
                    </ViewerImg>
                  </div>
                  <div class="nine-content">
                    <div class="divider"></div>
                    <div class="nine-title">
                      {{ ev.name }}
                    </div>
                    <div class="nine-body">
                      {{ ev.introduction }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
/**
 * @Description: 公司简介
 * @Author: zhailei
 *
 **/
import { axios } from "@/utils/request";
import ViewerImg from "@/components/TopVUI/custom/ViewerImg";
import { Carousel3d, Slide } from "vue-carousel-3d";
export default {
  name: "CompanyProfile",
  components: {
    ViewerImg,
    Carousel3d,
    Slide,
  },
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    soucre: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      //加载中
      spinning: false,
      dataResource: {},
      tableData: [],
      index: 0,
      checkSouce: {},
      configData: [],
    };
  },
  computed: {},
  mounted() {
    this.getData();
  },
  methods: {
    //集团简介图片
    introductionImg(item = {}) {
      let { data } = item;
      let path = data?.orgImage ?? "[]";
      return this.getUrl(path);
    },

    //集团简介文字
    introductionDesc(item = {}) {
      let { data } = item;
      return data?.orgBriefIntroduction ?? {};
    },

    //图片+名称
    coreBusiness(item) {
      let { data = [] } = item;
      return this.filterNum(data ?? [], 6);
    },

    //左图片-右文字
    developCourse(item) {
      let { data = [] } = item;
      return this.filterNum(data ?? [], 2);
    },

    //两侧文字+中间图片
    firmCulture(item) {
      let { data = [] } = item;
      return this.filterNum(data ?? [], 1);
    },

    //卡片类型
    firmHonor(item) {
      let { data = [] } = item;
      data.forEach((v, i) => {
        let number = i + 1;
        if (number < 10) {
          this.$set(v, "sort", "0" + number.toString());
        } else {
          this.$set(v, "sort", number);
        }
      });
      return this.filterNum(data ?? [], 3);
    },

    //图片轮播
    organization(item) {
      let { data = [] } = item;
      return this.filterNum(data ?? [], 3);
    },

    //上一页
    prev() {
      this.spinning = true;
      if (this.index > 0) {
        this.index--;
      } else {
        this.index = this.tableData.length - 1;
      }
      this.checkSouce = this.tableData?.[this.index] ?? {};
      this.getAllData();
    },
    //下一页
    next() {
      this.spinning = true;
      if (this.index < this.tableData.length - 1) {
        this.index++;
      } else {
        this.index = 0;
      }
      this.checkSouce = this.tableData?.[this.index] ?? {};
      this.getAllData();
    },

    //查询集团列表
    getData() {
      let { id } = this.soucre;
      axios
        .post(
          "/mdata/organization/getEnterpriseCompanyList",
          {
            type: id,
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { data } = res;
          this.tableData = data;
          this.checkSouce = this.tableData?.[this.index] ?? {};
          this.getAllData();
        })
        .catch((_) => {
          this.tableData = [];
          this.checkSouce = {};
        });
    },

    isObject(value) {
      return Object.prototype.toString.call(value) === "[object Object]";
    },
    getAllData() {
      Promise.all([
        this.getConfigData(this.checkSouce?.uuid ?? ""),
        this.getDetail(this.checkSouce?.uuid ?? ""),
      ])
        .then((_) => {
          let { dataResource } = this;
          this.configData.forEach((item) => {
            this.$set(item, "data", dataResource[item.code] ?? null);
          });
          this.configData = this.configData.filter(
            (v) =>
              this.isObject(v.data) ||
              (Array.isArray(v.data) && v.data.length > 0)
          );
        })
        .finally((_) => {
          setTimeout(() => {
            this.spinning = false;
          }, 500);
        });
    },

    handleLeft() {
      this.$refs.carousel3d?.[0]?.goNext();
    },
    handleRight() {
      this.$refs.carousel3d?.[0]?.goPrev();
    },
    //查询详情
    getDetail(uuid = "") {
      if (!uuid) {
        this.spinning = false;
        return;
      }
      return new Promise((resolve, reject) => {
        this.$get(
          `/portcommon/lygEnterpriseQualifications/infoByOrgId?orgId=${uuid}`
        )
          .then((res) => {
            this.dataResource = res?.data ?? {};
            resolve();
          })
          .catch((_) => {
            this.dataResource = {};
            reject();
          })
          .finally((_) => {});
      });

      //   this.$get(`/mdata/organization/getDetail?orgId=${uuid}`)
      //     .then((res) => {
      //       let { data } = res;
      //       //   this.dataResource = data;
      //     })
      //     .catch((_) => {
      //       //   this.dataResource = {};
      //     })
      //     .finally((_) => {});
    },

    getConfigData(uuid = "") {
      return new Promise((resolve, reject) => {
        this.$get(
          `/portcommon/lygEnterpriseQualifications/configByOrgId?orgId=${uuid}`
        )
          .then((res) => {
            this.configData = res.data ?? [];
            resolve();
          })
          .catch((_) => {
            this.configData = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    getUrl(data = "[]") {
      return JSON.parse(data)?.[0]?.url ?? "";
    },

    //数组分割
    filterNum(arr = [], number) {
      let newArr = [];
      for (let i = 0; i < arr.length; ) {
        newArr.push(arr.slice(i, (i += number)));
      }
      return newArr;
    },
  },
};
</script>

<style lang="less" scoped>
.company-profile-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;

  .company-profile {
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    .arrow {
      z-index: 99;
      position: absolute;
      height: 58px;
      width: 39px;
      top: 55%;
      cursor: pointer !important;
      img {
        width: 100%;
        height: 100%;
      }
      &.prevArrow {
        background: url(~@/assets/img/portalEntry/prevArrow.png) no-repeat
          center;
        background-size: 100% 100%;
        left: 46px;
      }
      &.nextArrow {
        background: url(~@/assets/img/portalEntry/nextArrow.png) no-repeat
          center;
        background-size: 100% 100%;
        right: 46px;
      }
    }
    /deep/.ant-spin-nested-loading {
      height: 100%;
      .ant-spin {
        max-height: 100%;
      }
      .ant-spin-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 40px 100px 20px 100px;
        box-sizing: border-box;
        overflow: hidden;
      }
    }
    .company-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .company-name {
        height: 72px;
        text-align: center;
        background: url(~@/assets/img/portalEntry/companyProfile_title.png);
        background-size: 100% 100%;
        margin-bottom: 10px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 36px;
        color: #ffc21f;
      }
      .company-main {
        flex: 1;
        .custom-scrollbar();
        overflow-x: hidden !important;
        .card-content {
          min-height: 282px;
          margin-bottom: 24px;
          display: flex;
          flex-direction: column;
          &:last-of-type {
            margin-bottom: 0;
          }
          .card-header {
            height: 36px;
            flex-shrink: 0;
            background: url(~@/assets/img/portalEntry/company_profile_4.png)
              no-repeat center;
            background-size: 100% 100%;
            font-size: 18px;
            color: #ffff00;
            font-family: Microsoft YaHei;
            font-weight: 400;
            display: flex;
            align-items: center;
            padding-left: 40px;
            span {
              font-weight: 700;
            }
          }
          .card-body {
            flex: 1;
            overflow: hidden;
            border: 1px solid rgba(0, 213, 255, 0.5);
            border-top: 0;
            border-radius: 0px 0px 0px 8px;
            box-sizing: border-box;
            /deep/.ant-carousel {
              .custom-slick-arrow {
                z-index: 999;
                width: 24px;
                height: 24px;
                background: rgba(0, 213, 255, 0.2);
                border-radius: 4px;
                border: 1px solid #00d5ff;
                cursor: pointer;
                color: #fff;
                font-size: 12px;
                .anticon {
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                }
              }
              .custom-slick-arrow:before {
                display: none;
              }
              .custom-slick-arrow:hover {
                opacity: 0.5;
              }
              .slick-dots {
                display: none !important;
              }
            }
            &.type_1 {
              padding: 12px 24px;
              position: relative;
              .company-baseinfo {
                float: left;
                height: 272px;
                width: 394px;
                margin-right: 20px;
                padding: 4px;
                border: 1px solid #00d5ff;
                .company-img {
                  width: 100%;
                  height: 100%;
                  div {
                    height: 100%;
                  }
                  img {
                    height: 100%;
                    width: 100%;
                  }
                }
              }
              .text-info {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #b8f3ff;
                word-wrap: break-word; /* 允许长单词或URL从任意位置换行 */
              }
            }
            &.type_2 {
              box-sizing: border-box;
              padding: 24px 44px 24px 44px;
              /deep/.ant-carousel {
                .course-item {
                  .honor-item {
                    display: flex;
                    .imgs {
                      width: 244px;
                      border: 1px solid #00d5ff;
                      display: flex;
                      flex-direction: column;
                      margin-right: 30px;
                      overflow: hidden;
                      &:last-of-type {
                        margin-right: 0;
                      }
                      &:first-of-type {
                        margin-left: 8px;
                      }
                      .imgs-top {
                        flex-shrink: 0;
                        user-select: none;
                        padding: 4px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        div {
                          height: 100%;
                        }
                        img {
                          width: 214px;
                          height: 146px;
                          object-fit: cover;
                        }
                      }
                      .imgs-bottom {
                        flex: 1;
                        padding: 6px 10px;
                        box-sizing: border-box;
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        background: rgba(0, 213, 255, 0.3);
                        color: #ffffff;
                        display: flex;
                        align-items: center;
                      }
                    }
                  }
                }
              }
            }
            &.type_3 {
              box-sizing: border-box;
              padding: 24px 44px 24px 64px;
              .course-item {
                .three-item {
                  height: 100%;
                  display: flex;
                  .base-info {
                    height: 100%;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    .left-images {
                      width: 244px;
                      height: 194px;
                      border: 1px solid #00d5ff;
                      div {
                        height: 100%;
                      }
                      img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                      }
                    }
                    .right-text {
                      padding: 0 18px;
                      box-sizing: border-box;
                      flex: 1;
                      display: flex;
                      flex-direction: column;
                      .divider {
                        width: 32px;
                        height: 3px;
                        background: #ffc21f;
                      }
                      .small-title {
                        padding: 12px 0;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #00ffff;
                      }
                      .small-body {
                        word-wrap: break-word; /* 允许长单词或URL从任意位置换行 */
                        flex: 1;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 14px;
                        color: #b8f3ff;
                        .custom-scrollbar();
                      }
                    }
                  }
                }
              }
            }
            &.type_4 {
              display: flex;
              align-items: center;
              .left-content {
                padding: 24px 24px 24px 44px;
                box-sizing: border-box;
                width: 520px;
                flex-shrink: 0;
                .text-warp {
                  padding: 0 24px 0 0;
                  box-sizing: border-box;
                  min-height: 194px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 16px;
                  color: #b8f3ff;
                  white-space: pre-line;
                }
              }
              .right-content {
                box-sizing: border-box;
                padding: 24px 44px;
                flex: 1;
                overflow: hidden;
                .course-item {
                  .three-item {
                    height: 100%;
                    display: flex;
                    .base-info {
                      height: 100%;
                      flex: 1;
                      display: flex;
                      .left-images {
                        width: 244px;
                        height: 194px;
                        border: 1px solid #00d5ff;
                        div {
                          height: 100%;
                        }
                        img {
                          height: 100%;
                          width: 100%;
                          object-fit: cover;
                        }
                      }
                      .right-text {
                        padding: 0 18px;
                        box-sizing: border-box;
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        .divider {
                          width: 32px;
                          height: 3px;
                          background: #ffc21f;
                        }
                        .small-title {
                          padding: 12px 0;
                          font-family: Microsoft YaHei;
                          font-weight: 400;
                          font-size: 16px;
                          color: #00ffff;
                        }
                        .small-body {
                          word-wrap: break-word; /* 允许长单词或URL从任意位置换行 */
                          flex: 1;
                          font-family: Microsoft YaHei;
                          font-weight: 400;
                          font-size: 14px;
                          color: #b8f3ff;
                        }
                      }
                    }
                  }
                }
              }
            }
            &.type_5 {
              box-sizing: border-box;
              padding: 24px 44px 24px 44px;
              /deep/.ant-carousel {
                .course-item {
                  height: 198px;
                  .type-five-item {
                    height: 100%;
                    display: flex;
                    .culture {
                      width: 518px;
                      height: 100%;
                      margin-right: 40px;
                      display: flex;
                      flex-direction: column;
                      padding: 30px 40px;
                      box-sizing: border-box;
                      overflow: hidden;
                      position: relative;
                      background: url(~@/assets/img/portalEntry/company_profile_5.png)
                        no-repeat center;
                      background-size: 100% 100%;
                      &:last-of-type {
                        margin-right: 0;
                      }
                      .culture-title {
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 24px;
                        color: #e8fbff;
                        flex-shrink: 0;
                      }
                      .sort {
                        user-select: none;
                        position: absolute;
                        top: 0px;
                        right: 10px;
                        font-size: 60px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 0.2);
                        z-index: 22;
                      }
                      .culture-line {
                        flex-shrink: 0;
                        width: 32px;
                        height: 2px;
                        background: #ffc21f;
                        margin: 16px 0;
                      }
                      .culture-content {
                        flex: 1;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 16px;
                        color: #e8fbff;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                      }
                    }
                  }
                }
              }
            }
            &.type_6 {
              display: flex;
              align-items: center;
              .type-6-left {
                padding: 24px 24px 24px 44px;
                box-sizing: border-box;
                width: 907px;
                flex-shrink: 0;
                .text-warp {
                  padding: 0 24px 0 0;
                  box-sizing: border-box;
                  min-height: 194px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 16px;
                  color: #b8f3ff;
                  white-space: pre-line;
                }
              }
              .type-6-right {
                flex: 1;
                overflow: hidden;
                position: relative;
                padding: 24px 44px 24px 44px;
                box-sizing: border-box;
                /deep/.carousel-3d-container {
                  margin: 0 !important;
                  .carousel-3d-slide {
                    background: unset;
                    border: 0;
                  }

                  .photo-container {
                    height: 100%;
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    .photo-img {
                      img {
                        height: 160px;
                        width: 100%;
                        object-fit: cover;
                      }
                    }
                    .photo-name {
                      margin-top: 10px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 14px;
                      color: #8fdbfc;
                      text-align: center;
                    }
                  }
                }
                .left,
                .right {
                  position: absolute;
                  width: 24px;
                  height: 24px;
                  background: rgba(0, 213, 255, 0.2);
                  border-radius: 4px;
                  border: 1px solid #00d5ff;
                  cursor: pointer;
                  color: #fff;
                  font-size: 12px;
                  top: 50%;
                  transform: translateY(-50%);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
                .left {
                  left: 14px;
                }
                .right {
                  right: 14px;
                }
              }
            }
            &.type_7 {
              box-sizing: border-box;
              padding: 24px 0 24px 44px;
              display: flex;
              flex-wrap: wrap;
              .seven-card-item {
                width: 33.3333%;
                padding: 0 45px 24px 0;
                box-sizing: border-box;
                .warp-item {
                  width: 100%;
                  min-height: 212px;
                  display: flex;
                  align-items: center;
                  background: url(~@/assets/img/portalEntry/company_profile_6.png)
                    no-repeat center;
                  background-size: 100% 100%;
                  padding: 0 10px 0 18px;
                  box-sizing: border-box;
                  position: relative;
                  .seven-img {
                    width: 176px;
                    height: 176px;
                    div {
                      height: 100%;
                    }
                    img {
                      width: 100%;
                      height: 100%;
                    }
                    .not-data {
                      height: 100%;
                      width: 100%;
                      background: url(~@/assets/img/portalEntry/ztc_icon_15.png)
                        no-repeat center;
                      background-size: 100% 70%;
                    }
                  }
                  .seven-content {
                    flex-shrink: 0;
                    flex: 1;
                    padding: 10px 0 10px 16px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .sort {
                      position: absolute;
                      right: 0;
                      bottom: 0;
                      width: 86px;
                      height: 86px;
                      background: rgba(26, 238, 187, 0.15);
                      border-radius: 50%;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      font-family: D-DIN;
                      font-weight: 400;
                      font-size: 36px;
                      color: #1aeebb;
                    }
                    .seven-title {
                      margin-bottom: 8px;
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 16px;
                      color: #00d5ff;
                    }
                    .text-item {
                      margin-bottom: 6px;
                      .anticon {
                        margin-right: 6px;
                      }
                      font-family: Microsoft YaHei;
                      font-weight: 400;
                      font-size: 14px;
                      color: #b8f3ff;
                    }
                  }
                }
              }
            }
            &.type_8 {
              box-sizing: border-box;
              padding: 24px 20px 0 52px;
              display: flex;
              flex-wrap: wrap;
              .card-item {
                width: 16.6666%;
                padding: 0 30px 24px 0;
                box-sizing: border-box;
                .card-warp {
                  width: 100%;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  background: rgba(0, 144, 255, 0);
                  border: 1px solid #00d5ff;
                  .top-img {
                    flex-shrink: 0;
                    user-select: none;
                    padding: 4px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    div {
                      height: 100%;
                    }
                    img {
                      width: 100%;
                      height: 146px;
                      object-fit: cover;
                    }
                  }
                  .bottom-text {
                    flex: 1;
                    padding: 6px 10px;
                    box-sizing: border-box;
                    font-size: 16px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    background: rgba(0, 213, 255, 0.3);
                    color: #ffffff;
                    display: flex;
                    align-items: center;
                  }
                }
              }
            }
            &.type_9 {
              box-sizing: border-box;
              padding: 24px 44px 24px 52px;
              display: flex;
              flex-wrap: wrap;
              .nine-card-item {
                width: 50%;
                height: 100%;
                box-sizing: border-box;
                position: relative;
                padding: 0 18px 24px 18px;
                .nine-img {
                  float: left;
                  width: 244px;
                  height: 200px;
                  background: rgba(0, 144, 255, 0);
                  border: 1px solid #00d5ff;
                  padding: 4px;
                  overflow: hidden;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-right: 18px;
                  img {
                    height: 100%;
                    width: 100%;
                    object-fit: contain;
                  }
                }
                .nine-content {
                  .divider {
                    position: relative;
                    left: 264px;
                    width: 32px;
                    height: 3px;
                    background: #ffc21f;
                  }
                  .nine-title {
                    padding: 12px 0;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #00ffff;
                  }
                  .nine-body {
                    word-wrap: break-word; /* 允许长单词或URL从任意位置换行 */
                    flex: 1;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 14px;
                    color: #b8f3ff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  //自定义滚动条
  .custom-scrollbar {
    overflow: auto !important;
    overflow-x: overlay !important;
    overflow-y: overlay !important;
    //滚动条整体样式
    &::-webkit-scrollbar {
      width: 6px !important;
      height: 10px !important;
    }

    //滚动条里面小方块
    &::-webkit-scrollbar-thumb {
      border-radius: 10px !important;
      background: rgba(0, 213, 255, 0.3) !important;
    }

    //滚动条里面轨道
    &::-webkit-scrollbar-track {
      border-radius: 10px !important;
      background: rgba(0, 213, 255, 0.1) !important;
    }
    //边角，即两个滚动条的交汇处
    &::-webkit-scrollbar-corner {
      background: none !important;
    }
  }
}
</style>
